<script setup lang="ts">
import Bar from "./components/Bar.vue";
import Pie from "./components/Pie.vue";
import Line from "./components/Line.vue";
import TypeIt from "@/components/ReTypeit";
import { computed, onUnmounted, ref } from "vue";
import { getCurrentLogin } from "@/api/log";
import { LoginLog } from "@/api/model/logModel";
import { ServerInfo } from "@/api/model/serverModel";
import { getServerInfo } from "@/api/server";
import { useUserStoreHook } from "@/store/modules/user";

defineOptions({
  name: "Welcome",
});

const list = ref<LoginLog[]>();
const server = ref<ServerInfo>();
const date: Date = new Date();
const loading = ref<boolean>(true);
const titleClass = computed(() => {
  return ["text-base", "font-medium"];
});

setTimeout(() => {
  loading.value = !loading.value;
}, 800);

const greetings = computed(() => {
  if (date.getHours() >= 0 && date.getHours() < 12) {
    return "上午阳光明媚，祝你薪水翻倍🌞！";
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午小风娇好，愿你青春不老😃！";
  } else {
    return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
  }
});

getCurrentLogin().then(res => {
  list.value = res;
});
getServerInfo().then(res => {
  server.value = res;
});
onUnmounted(() => {
  window.onresize = null;
});
</script>

<template>
  <div class="welcome">
    <el-card class="top-content dark:border-none">
      <div class="left-mark select-none">
        <img :src="useUserStoreHook().avatar" alt="" />
        <TypeIt
          :className="'type-it0'"
          :values="[greetings]"
          :cursor="false"
          :speed="60"
        />
      </div>
    </el-card>

    <el-row :gutter="24" style="margin: 20px">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        style="margin-bottom: 20px"
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200,
          },
        }"
      >
        <el-card style="height: 410px">
          <template #header>
            <TypeIt
              :class="titleClass"
              :className="'type-it1'"
              :values="['服务器信息']"
              :cursor="false"
              :speed="120"
            />
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <el-descriptions :column="1" border>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">操作系统</div>
                  </template>
                  {{ server.os }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">系统版本</div>
                  </template>
                  {{ server.osVersion }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">系统架构</div>
                  </template>
                  {{ server.arch }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">应用容器</div>
                  </template>
                  {{ server.container }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">Java版本</div>
                  </template>
                  {{ server.javaVersion }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">Jvm版本</div>
                  </template>
                  {{ server.jvmVersion }}
                </el-descriptions-item>
                <el-descriptions-item align="center">
                  <template #label>
                    <div class="cell-item">内存信息</div>
                  </template>
                  {{ server.maxMemory }} / {{ server.freeMemory }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        style="margin-bottom: 20px"
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 200,
          },
        }"
      >
        <el-card style="height: 410px">
          <template #header>
            <TypeIt
              :class="titleClass"
              :className="'type-it4'"
              :values="['接口请求统计']"
              :cursor="false"
              :speed="120"
            />
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <Line />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        style="margin-bottom: 20px"
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400,
          },
        }"
      >
        <el-card style="height: 410px">
          <template #header>
            <TypeIt
              :class="titleClass"
              :className="'type-it3'"
              :values="['用户登录区域统计']"
              :cursor="false"
              :speed="120"
            />
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <Pie />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        style="margin-bottom: 20px"
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400,
          },
        }"
      >
        <el-card style="height: 410px">
          <template #header>
            <TypeIt
              :class="titleClass"
              :className="'type-it5'"
              :values="['用户登录次数排名']"
              :cursor="false"
              :speed="120"
            />
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <Bar />
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="8"
        :xl="8"
        style="margin-bottom: 20px"
        :initial="{
          opacity: 0,
          y: 100,
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400,
          },
        }"
      >
        <el-card style="height: 410px">
          <template #header>
            <TypeIt
              :class="titleClass"
              :className="'type-it2'"
              :values="['最近登录日志']"
              :cursor="false"
              :speed="80"
            />
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <el-scrollbar height="324px">
                <el-timeline v-show="list?.length > 0">
                  <el-timeline-item
                    v-for="(item, index) in list"
                    :key="index"
                    :type="item.status === '成功' ? 'success' : 'danger'"
                    :timestamp="item.created"
                  >
                    {{ item.status }}
                    <br />
                    IP: {{ item.remoteAddr }}
                    <br />
                    区域: {{ item.ipRegion }}
                    <br />
                    设备: {{ item.loginDevice }}
                  </el-timeline-item>
                </el-timeline>
                <el-empty v-show="list?.length === 0" />
              </el-scrollbar>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

.main-content {
  margin: 0 !important;
}

.welcome {
  height: 100%;

  .top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background: var(--el-bg-color);

    .left-mark {
      display: flex;
      align-items: center;

      img {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
      }

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
